<script setup lang="ts">
import { useViewer } from "@/composables/useViewer";
import { defineProps } from "vue"
import { Splitpanes, Pane } from 'splitpanes';

const props = defineProps({
    code: String,
    runCode: Number
});

useViewer(["container", "container1", "container2"], props)
</script>

<template>

    <Splitpanes horizontal style="height: 100%">
        <pane>
            <div id="container" style="width: 100%; height: 100%"></div>
        </pane>
        <pane>
            <Splitpanes style="height: 100%">
                <pane>
                    <div id="container2" style="width: 100%; height: 100%"></div>
                </pane>
                <pane>
                    <div id="container1" style="width: 100%; height: 100%"></div>
                </pane>
            </Splitpanes>
        </pane>
    </Splitpanes>

</template>
